<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
            <searchForm 
              :formOptions="formOptions" 
              @onSearch="onSearch" 
              @onReset="onReset"
              v-show="showSearch" />
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button v-hasPermi="[addBtnPermission]" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    v-hasPermi="[exportBtnPermission]"
                    size="mini"
                    @click="handleExport"
                  >导出</el-button>
              </el-col>
              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table 
              :data="tablelist" 
              @selection-change="handleSelectionChange"
              >
              <el-table-column label="活动名称" prop="name" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="活动时间" prop="activityTime" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="活动地点" prop="position" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="活动类型" prop="activityTypeName" :show-overflow-tooltip="true" align="center">
              </el-table-column>
              <el-table-column label="附件" prop="attachmentPath" align="center">
                <template slot-scope="{row}">
                  <el-button v-if="row.attachmentPath" size="mini" type="text"  @click="dowloadAttachment(row.attachmentPath)">下载</el-button>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="提交人" prop="createBy" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="审批状态" prop="approveStatusName" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="审批备注" prop="approveRemark" align="center" :show-overflow-tooltip="true" />
              <el-table-column  label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" v-if="scope.row.approveStatus != '1'" v-hasPermi="[approveBtnPermission]"  @click="handleApprove(scope.row)">审批</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.approveStatus != '1'" v-hasPermi="[editBtnPermission]"  @click="handleUpdate(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" v-if="scope.row.approveStatus != '1'" v-hasPermi="[delBtnPermission]"  @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
              @pagination="getList" />
        </el-col>
      </el-row>
      <ActivityApprove 
        :mainType="mainType" 
        ref="addRef"
        @updateList="getList"
        ></ActivityApprove>
      <ActivityEdit
        :mainType="mainType" 
        ref="approveRef"
        @updateList="getList"
      >
      </ActivityEdit>
    </div>
  </template>
  <script>
  import searchForm from "@/components/Search/searchForm.vue";
  import treeIndex from "@/components/tree/index.vue";
  import ActivityApprove from "./moudles/activityApprove.vue"
  import ActivityEdit from "./moudles/activityEdit.vue"
  import { 
    activityList,
    delActivity
   } from "@/api/leagueManagement/activity";
  export default {
    components: { 
      treeIndex,
      searchForm,
      ActivityApprove,
      ActivityEdit
    },
    data() {
      return {
        deptOptions: [], 
        formOptions: [
            {
                label: "活动名称",
                prop: "name",
                element: "el-input",
                placeholder: "请输入活动名称",
            }
        ],
        showSearch: true,
        tablelist: [],
        total: 0,
        queryParams: {
          pageNum: 0,
          pageSize: 10,
          name: ''
        }
      };
    },
    dicts: [
        "school_activity_type", // 校园文化活动类型
        "league_approve_status"
    ],
    watch: {
    },
    computed: {
      // 校园文化活动
      isCulture() {
        return this.$route.query.type == 'culture'
      },
      // 社会实践
      isSocial() {
        return this.$route.query.type == 'social'
      },
      // 志愿服务
      isVoluntary() {
        return this.$route.query.type == 'voluntary'
      },
      // 科创竞赛
      isSeience() {
        return this.$route.query.type == 'seience'
      },
      mainType() {
        if (this.isCulture) {
          return 1
        } else if (this.isSocial) {
          return 2
        } else if (this.isVoluntary) {
          return 3
        } else if (this.isSeience) {
          return 4
        }
      },
      addBtnPermission () {
        if (this.isCulture) {
            return 'tuanCommittee:culture:add'
        }
        if (this.isSocial) {
            return 'tuanCommittee:social:add'
        }
        if (this.isVoluntary) {
            return 'tuanCommittee:voluntary:add'
        }
        if (this.isSeience) {
            return 'tuanCommittee:seience:add'
        }
      },
      exportBtnPermission () {
        if (this.isCulture) {
            return 'tuanCommittee:culture:export'
        }
        if (this.isSocial) {
            return 'tuanCommittee:social:export'
        }
        if (this.isVoluntary) {
            return 'tuanCommittee:voluntary:export'
        }
        if (this.isSeience) {
            return 'tuanCommittee:seience:export'
        }
      },
      approveBtnPermission () {
        if (this.isCulture) {
            return 'tuanCommittee:culture:approve'
        }
        if (this.isSocial) {
            return 'tuanCommittee:social:approve'
        }
        if (this.isVoluntary) {
            return 'tuanCommittee:voluntary:approve'
        }
        if (this.isSeience) {
            return 'tuanCommittee:seience:approve'
        }
      },
      editBtnPermission () {
        if (this.isCulture) {
            return 'tuanCommittee:culture:edit'
        }
        if (this.isSocial) {
            return 'tuanCommittee:social:edit'
        }
        if (this.isVoluntary) {
            return 'tuanCommittee:voluntary:editt'
        }
        if (this.isSeience) {
            return 'tuanCommittee:seience:edit'
        }
      },
      delBtnPermission () {
        if (this.isCulture) {
            return 'tuanCommittee:culture:del'
        }
        if (this.isSocial) {
            return 'tuanCommittee:social:del'
        }
        if (this.isVoluntary) {
            return 'tuanCommittee:voluntary:del'
        }
        if (this.isSeience) {
            return 'tuanCommittee:seience:del'
        }
      },
    },
    created() {
      this.getList()
    },
    methods: {
      handleAdd () {
        this.$refs.addRef.open()
      },
      handleSelectionChange(val){
        console.log(val, 'val')
      },
      handleUpdate(row){
        this.$refs.addRef.open(row)
      },
      handleApprove(row){
        this.$refs.approveRef.open(row)
      },
      handleDelete(rowdata){
        this.$modal
          .confirm(`确认删除"${rowdata.name}"活动吗？`)
          .then(()=> {
              return delActivity(rowdata.id);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      getList () {
        activityList({
          ...this.queryParams,
          mainType: this.mainType
        }).then((res)=>{
          this.tablelist = res.rows.map((item) => {
            if (item.activityType) {
              const _activity = this.dict.type.school_activity_type.find((dict) => {
                return dict.value == item.activityType
              })
              item.activityTypeName = _activity ? _activity.label : ''
            }
            if (item.approveStatus) {
              const _approveStatus = this.dict.type.league_approve_status.find((dict) => {
                return dict.value == item.approveStatus
              })
              item.approveStatusName = _approveStatus ? _approveStatus.label : ''
            }
            return item
          })
          this.total = res.total
        })
      },
      handleNodeClick(data) {
          console.log(data, "选中的值");
      },
      onSearch(val) {
          // 查询条件和分页数据合并
          const arr = Object.assign(this.queryParams, val);
          this.queryParams.pageNum = 1;
          this.getList();
      },
      // 重置
      onReset(data) {
          this.queryParams.pageNum = 1;
          const arr = Object.assign(this.queryParams, data);
          this.getList();
      },
      dowloadAttachment(url) {
        window.open(url)
      },
      handleExport() {
        this.download(
          "/league/activity/export",
          {
            ...this.queryParams,
            mainType: this.mainType
          },
          `活动表格_${new Date().getTime()}.xlsx`
        );
      },
    }
  };
  </script>
  <style scoped lang="scss">
  .head-container {
    overflow-x: scroll;
  }
  </style>